<template>
  <div>
    <!-- vue2数据更新
         对象：对象原有属性是响应式的，但新增属性非响应式的  
         vue解决方案： set方法（让新增属性有响应式）
            this.$set('对象',对象key,需要修改成的值)   
            js也可以写:
             Vue.set('对象',对象的key,需要修改成的值) 
          数组：能修改源数组的数组方法才有响应式
          vue   this.$set(数组,数组的下标,需要修改成的值)
           js   Vue.set(数组,数组的下标,需要修改成的值)
               -->
    <h2>{{ obj }}</h2>
    <button @click="btnClick">修改obj</button>
    <hr />
    <h2>{{ arr }}</h2>
    <button @click="btnClick2">修改arr</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      obj: {
        name: '张三'
      },
      arr: [1, 2, 3]
    }
  },
  methods: {
    btnClick () {
      // this.obj.age = 18
      this.$set(this.obj, 'age', 18)
      console.log(this.obj)
    },
    btnClick2 () {
      // this.arr[0] = 99
      this.$set(this.arr, 0, 99)
    }
  }
}
</script>
<style></style>
